<template>
  <div class="goodsInfo-container">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <div class="mui-card">
				<div class="mui-card-content">
          <div class="mui-card-content-inner">
					  <swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
          </div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">{{ goodsinfo.title }}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
              市场价：<del>￥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{ goodsinfo.sell_price }}</span>
            </p>
            <p>购买数量：<numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox></p>
            <p>
              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small" @click="addToshopCar">加入购物车</mt-button>
            </p>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{ goodsinfo.goods_no }}</p>
            <p>库存情况：{{ goodsinfo.stock_quantity }} 件</p>
            <p>上架时间：{{ goodsinfo.add_time | dateFormat }}</p>
					</div>
				</div>
				<div class="mui-card-footer">
          <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
          <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
        </div>
			</div>
  </div>
</template>
<script>
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/gooodsinfo_numbox.vue'
export default {
  data(){
    return{
      id: this.$route.params.id,
      lunbotu: [],
      goodsinfo: {},
      ballFlag: false,
      selectedCount: 1
    }
  },
  created(){
    this.getLunbotu()
    this.getGoodsInfo()
  },
  methods:{
    getLunbotu(){
      this.axios.get('api/getthumimages/'+this.id)
      .then( response =>{
        response.data.message.forEach( item =>{
          item.img = item.src
        })
        this.lunbotu = response.data.message
      })
      .catch( error =>{
        console.log(error)
        Toast('获取商品图失败')
      })
    },
    getGoodsInfo(){
      this.axios.get('api/goods/getinfo/' + this.id)
      .then(response =>{
        // console.log(response)
        this.goodsinfo = response.data.message[0]
      })
      .catch(error =>{
        Toast('获取商品信息失败')
      })
    },
    goDesc(id){
      this.$router.push({ name:'goodsdesc', parmas: {id} })
    },
    goComment(id){
      this.$router.push({ name:'goodscomment', parmas: {id} })
    },
    addToshopCar(){
      this.ballFlag = !this.ballFlag
    },
    beforeEnter(el){
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done){
      el.offsetWidth;
      const ballPosition = this.$refs.ball.getBoundingClientRect()
      const badgePosition = document
      .getElementById('badge')
      .getBoundingClientRect()
      const xDist = badgePosition.left - ballPosition.left
      const yDist = badgePosition.top - ballPosition.top

      el.style.transform = `translate(${xDist}px, ${yDist}px)`
      el.style.transition = "all .5s ease";
      done()
    },
    afterEnter(el){
      this.ballFlag = false;
    },
    getSelectedCount(count){
      this.selectedCount = count
      console.log(this.selectedCount)
    }
  },
  components:{
    swiper,
    numbox
  }
}
</script>
<style lang="scss" scoped>
  .goodsInfo-container{
    background-color: #eee;
    overflow: hidden;
    .now_price{
      color:red;
      font-size:16px;
      font-weight:bold;
    }
    .mui-card-footer{
      display:block;
      button{
        margin:15px 0;
      }
    }
    .ball{
      width:15px;
      height:15px;
      border-radius:50%;
      background-color: red;
      z-index: 99;
      position:absolute;
      top:340px;
      left:150px;
      // transform:translate(88px,154px);
    }
  }
</style>